﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="d1" style="width: 100px; height: 100px; border: 1px solid red;"></div>
            <div id="d2" style="width: 273px; height: 230px; position: absolute; left: 131px; top: 17px;border:1px solid red;display:none"></div>
        </div>
    </form>
</body>
</html>
<script type="text/javascript">
    var s = "Stifel Nicolaus Technology＆Telecom Conference 2012";
    alert(s.length);

    var ElMove = function (fromEl, toEl) {
        this.fromel = fromEl;
        this.toel = toEl;
        this.existfel = false;
        this.existtel = false;
        this._x = 0;
        this._y = 0;

        this.movein = function (el, tag) {
            if (tag == "parent") {
                $(el).css("display", "block");
            }
            if (tag == "child") {
                $(el).css("display", "block");
            }
        }

        this.moveout = function (el, tag) {
            if (tag == "parent") {
                if (this.existtel == true) {
                    $(el).css("display", "block");
                } else {
                    $(el).css("display", "none");
                }
            }
            if (tag == "chlid") {
                if (this.existfel == true) {
                    $(el).css("display", "block");
                } else {
                    $(el).css("display", "none");
                }
            }
        }

        this.BindEvent = function () {
            var that = this;
            $(that.fromel).hover(function () {
                that.movein(that.toel, "parent");
            }, function (e) {
                window.setTimeout(function () {
                    that.existtel = that.checkPosition(that.toel, that._x, that._y);
                    //alert(that.existtel);
                    that.moveout(that.toel, "parent");
                }, 2000);
            });

            $(that.toel).hover(function () {
                that.movein(that.toel, "child");
            }, function (e) {
                window.setTimeout(function () {
                    that.existfel = that.checkPosition(that.fromel, that._x, that._y);
                    //alert(that.existfel);
                    that.moveout(that.toel, "child");
                }, 2000);
            });
        }

        this.checkPosition = function (el, x, y) {
            var _t = el.offsetTop;
            var _l = el.offsetLeft;
            var _w = el.offsetLeft + el.offsetWidth;
            var _h = el.offsetTop + el.offsetHeight;
            if (x > _l && x < _w && y > _t && y < _h) {
                return true;
            }
            return false;
        }

        this.getCurrentPosition = function () {
            var that = this;
            document.onmousemove = function (e) {
                that._x = e.pageX;
                that._y = e.pageY;
            }
        }

        this.init = function () {
            this.getCurrentPosition();
            this.BindEvent();
        }
    }

    var c = new ElMove(document.getElementById("d1"), document.getElementById("d2"));
    c.init();
</script>
